<template>
    <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :error.sync="error"
        error-text="加载失败，请点击重试"
        :immediate-check = 'false'
        @load="onLoad"
    >
        <!-- <van-cell 
            v-for="(item, index) in list" 
            :key="index" 
            :title="item.content" /> -->
        <CommentItem
            v-for="(item, index) in list" 
            :key="index" 
            :comment="item"
            @reply-click="$emit('reply-click',$event)"
        />
    </van-list>
</template>

<script>
import { getComments } from '@/api/comment.js'
import CommentItem from './comment-item';

export default {
    name: 'CommentList',
    data() {
        return {
            // list: [],
            loading: false,
            finished: false,
            offset: null ,// 获取下一页数据的标记
            limit: 10,// 一次请求获取评论的条数
            error: false,
        };
    },

    props: {
        source: {
            type: [Number, Object, String],
            required: true
        },
        list: {
            type: Array,
            default: () => []
        },
        type: {
            type: String,
            // 自定义 Prop 数据验证
            validator(value) {
                return ['a','c'].includes(value)
            },
            default:'a'
        }
    },
    components: {
        CommentItem
    },
    created() {
        // 当你手动初始 onLoad 的话，它不会自动开始初始的 loading
        // 所以我们要手动的开启初始 loading 
        this.loading = true
        this.onLoad()
    },
    methods: {
        async onLoad() {
            try {
                // 获取文章的评论 和 获取评论的回复 是同一个接口
                // 唯一的区别是 接口的参数不一样
                //  type 和 source  

                // 1、请求获取数据
                const { data } = await getComments({
                    type: this.type ,//评论类型，a-对文章(article)的评论，c-对评论(comment)的回复
                    source: this.source.toString() , //	源id，文章id或评论id
                    offset: this.offset, //获取评论数据的偏移量，值为评论id，表示从此id的数据向后取，不传表示从第一页开始读取数据
                    limit: this.limit,
                })

                // 2、将数据添加到列表中
                // console.log(data);
                const { results } = data.data
                // this.list.push(...results)

                // const arr = []
                // arr.push(...results)
                this.$emit('updateList',results)
                
                this.$emit('onload-success',data.data)

                // 3、将 loading 设置为 false
                this.loading = false

                // 4、判断是否还有数据
                if (results.length) {
                    //有 就更新获取下一页的数据页码
                    this.offset = data.data.last_id
                } else {
                    // 没有 就将 finished 设置结
                    this.finished = true
                }

            } catch (err) {
                this.error = true  
                this.loading = false
            }

        },
        // updateComment(item, count) {
        //     // item.like_count = count,
        //     item.is_liking = !item.is_liking
        // }
    },
}
</script>

<style>

</style>